<template>
  <div class="ranking">
    <div class="cont1">
      <router-link :to="'/search'" class="search">
        <img src="../../assets/images/mkf/search.png" />
        <span>搜索关键词</span>
      </router-link>
      <div class="tab">
        <div :class="['item', { active: tabIndex == 1 }]" @click="changeTab(1)">
          社群活跃榜
        </div>
        <div :class="['item', { active: tabIndex == 2 }]" @click="changeTab(2)">
          最强推手榜
        </div>
        <div :class="['item', { active: tabIndex == 3 }]" @click="changeTab(3)">
          最佳写手榜
        </div>
      </div>
    </div>

    <div class="cont2">
      <div v-if="tabIndex == 1">
        <div class="top10">
          <div class="center">
            <div
              :class="['item', { active: subIndex == 1 }]"
              @click="changeSub(1)"
            >
              本周飙升Top10
            </div>
            <div
              :class="['item', { active: subIndex == 2 }]"
              @click="changeSub(2)"
            >
              历史总榜Top10
            </div>
          </div>
          <div class="question" @click="show1 = true">活跃分</div>
        </div>
        <div class="list">
          <div class="item">
            <!-- 1到3  黄色背景  yellow -->
            <div class="bg yellow"></div>
            <!-- 1到3  黄色  yellow -->
            <div class="num yellow">1</div>
            <img class="logo" src="../../assets/images/adver.jpg" />
            <div class="info">
              <div class="top">
                <div class="name">蚂蚁金服</div>
                <div class="score">
                  <span>10000分</span
                  ><img src="../../assets/images/mkf/icon_up.png" />
                </div>
              </div>
              <div class="bottom">每一个认真生活的人，都值得被认真对待</div>
            </div>
          </div>
          <div class="item">
            <div class="bg"></div>
            <div class="num">4</div>
            <img class="logo" src="../../assets/images/adver.jpg" />
            <div class="info">
              <div class="top">
                <div class="name">蚂蚁金服</div>
                <div class="score">
                  <span>10000分</span
                  ><img src="../../assets/images/mkf/icon_up.png" />
                </div>
              </div>
              <div class="bottom">年纪越大，越没有人会原谅你的穷</div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="develop">
          <img src="../../assets/images/mkf/noData.png" />
          <p>开发中，敬请期待</p>
        </div>
      </div>
    </div>

    <yd-popup v-model="show1" position="center" width="80%">
      <div class="scorePopup">
        <div class="title">如何提升社群活跃分？</div>
        <div class="content">
          新增社群成员、发布社群原创推文、新增追随社群、收纳到社群推文合集、社群成员转换成自己推文、社群推文被阅读等等社群行为都会增加社群活跃分哦~
        </div>
        <div class="btn" @click="show1 = false">确认</div>
      </div>
    </yd-popup>
  </div>
</template>

<script>
import { Popup } from "vue-ydui/dist/lib.rem/popup";
export default {
  name: "List",
  components: {
    ydPopup: Popup
  },
  props: {},
  data: function() {
    return {
      show1: false,
      tabIndex: 1,
      subIndex: 1
    };
  },
  mounted: function() {},
  methods: {
    changeTab(v) {
      this.tabIndex = v;
      this.subIndex = 1;
    },
    changeSub(v) {
      this.subIndex = v;
    }
  }
};
</script>

<style scoped>
.scorePopup {
  background-color: #32303a;
  border-radius: 0.2rem;
  overflow: hidden;
}
.scorePopup .title {
  padding: 0.36rem 0.4rem 0;
  text-align: center;
  font-size: 0.32rem;
  line-height: 0.4rem;
  color: #ffffff;
  font-weight: bold;
}
.scorePopup .content {
  padding: 0.11rem 0.4rem 0.36rem;
  text-align: center;
  font-size: 0.24rem;
  line-height: 0.3rem;
  color: #999999;
  font-weight: bold;
}
.scorePopup .btn {
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  color: #deaa8a;
  font-weight: bold;
  font-size: 0.32rem;
  line-height: 0.52rem;
  padding: 0.23rem 0;
}
</style>
